<template>

<div>
 
  <el-table
    ref="multipleTable"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="体检时间"
      width="190">
      <template slot-scope="scope">{{$moment(scope.row.torder.orderdate).format('YYYY-MM-DD HH:mm')}}</template>
    </el-table-column>
    
    <el-table-column
      prop="filenumber"
      label="档案号"
      width="190">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="190">
    </el-table-column>
     <el-table-column
      prop="phonenumber"
      label="手机号"
      width="190">
    </el-table-column>

     <el-table-column
 prop="tsetmeal.name"
      label="检测套餐"
      width="190">
    </el-table-column>

  
   <el-table-column
    
      label="报告状态"
      width="190">
            <template slot-scope="scope">  <span v-if="scope.row.tmemberExamination.reportStatus==1">报告已上传</span><span v-if="scope.row.tmemberExamination.reportStatus==0">报告未上传</span> </template>
    </el-table-column>

     <el-table-column label="操作">
      <template slot-scope="scope">
<span v-if="scope.row.tmemberExamination.reportStatus==1">  <el-button
          size="mini"
          @click="handleEdit1(scope.$index, scope.row)">查看</el-button></span><span v-if="scope.row.tmemberExamination.reportStatus==0">  <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">上传</el-button></span> 
      </template>
    </el-table-column>
  </el-table>

        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 3, 4]"
      :page-size="2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


<el-dialog title="文件上传" :visible.sync="dialogFormVisible">
 <el-form>
    <el-form-item>
      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        :http-request="upload"
        :before-upload="beforeAvatarUpload"
        multiple=""
        :auto-upload="false"
        list-type="picture-card"
         :file-list="fileList"
      >
        <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
          </el-upload>
    </el-form-item>
  </el-form>
  <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
</el-dialog>

<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>


<el-dialog title="查看报告" :visible.sync="dialogFormVisible1">
    <table class="table table-hover">
	            <thead>
				<td v-for="(item) in this.src" :key="item.id">
				  <img style="height:250px;width: 200px;" :src="'http://localhost:8085/img/'+(item.src)"/>
				</td>
	            </thead>
	        </table>



   <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
  </div>
</el-dialog>

  </div>

  
</template>


  

<script>
import axios from 'axios';

  export default {
    name: "UploadUi",
    data() {
      return {
        loading:true,
        dialogFormVisible1:false,
        src:[],
        fileList:[],
         dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      
        tmid:"",
        ss:"",
      name: "",
      url: "",
              tableData:[],
        currentPage4: 1, //当前页
        num:2,  //每页条数
        total:0,
        dialogFormVisible: false,
        formLabelWidth: '120px'
      }
    },
    methods: { handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
        beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('大小不能超过 2MB!');
        }
        return isLt2M;
      },
      submitUpload() {
      this.$refs.upload.submit();
    },
    //通过onchanne触发方法获得文件列表
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    upload(file) {
      let fd = new FormData();

      //文件信息中raw才是真的文件
     
      fd.append("files", file.file);
     fd.append("id", this.ss);
      fd.append("mtid", this.mtid);
      console.log(fd);
      console.log(this.ss)

      axios.post("/api/FileLoad/up",fd).then((res) => {
        this.url = res.data;
       
        this.$notify({
          title: '成功',
          message: '文件上传',
          type: 'success'
        });
        this.getEmpList()
        
      });
       this.dialogFormVisible = false
    },


       handleEdit(index, row) {
         console.log(row)
         this.mtid=row.tmemberExamination.id
     
         this.ss=row.filenumber
         this.dialogFormVisible = true
         },

         handleEdit1(index, row) {
            this.dialogFormVisible1=true
            axios.get("/api/ImgALlLIst",{params:{"id":row.filenumber}}).then(data=>{
              
              this.src=data.data
            })
         
                   
         },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
     
       onSubmit() {
         this.getEmpList()
      },
      getEmpList(){
              axios.get("/api/TmembersibiaoAllList",{params:{"page":this.currentPage4,"num":this.num}}).then(data=>{
               //console.log(data)
              this.tableData=data.data.rows  //获取分页数据
              this.total=data.data.total     //获取总记录数

              //加载样式
        setTimeout(() => {
          this.loading=false;
        }, 1000);
      })
      },
   
      handleSizeChange(val) {
        console.log("数据"+val)
        this.num=val
      
       this.getEmpList()
      },
      handleCurrentChange(val) {
        console.log("当前页"+val)
        this.currentPage4=val
        this.getEmpList()
         
        },
        handleRemove(file) {
        this.$refs.upload.handleRemove(file);

       /*   if (this.fileList.indexOf(this.baseImg + file.url)) {
            this.fileList.splice(this.fileList.indexOf(this.baseImg + file.url), 1);
       } */
       // 删除
 

      },
      },
      created(){
        this.getEmpList()
        
      }
  }
</script>